<template>
  <div class="column q-pa-sm">
    <div class="q-mt-md column">
      <div class="row no-wrap q-my-sm">
        <q-chip outline>All</q-chip>
        <q-chip outline>By Creator</q-chip>
        <q-chip outline>Related</q-chip>
        <q-chip outline>Digital Painting</q-chip>
      </div>
      <div class="column">
        <q-list>
          <video-list-item v-for="video in videos" :key="video.id" v-bind="video" />
        </q-list>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Video from 'src/models/Video';
import { defineComponent, ref } from 'vue';
import VideoListItem from 'components/video/VideoListItem.vue';
export default defineComponent({
  name: 'creator-panel',
  components: {
    VideoListItem,
  },
  setup() {
    const videos = ref([
      new Video('0'),
      new Video('0'),
      new Video('0'),
      new Video('0'),
      new Video('0'),
      new Video('0'),
    ]);
    return { videos };
  },
});
</script>
